<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <slot></slot>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

    <!-- 如果需要导航按钮 -->
    <!--<div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>-->

    <!-- 如果需要滚动条 -->
    <!--<div class="swiper-scrollbar"></div>-->
  </div>
</template>
<script>
import Swiper from "swiper";
import "swiper/css/swiper.min.css";

export default {
  name: "Home",
  updated() {
    new Swiper(".swiper-container", {
      //direction: "vertical", // 垂直切换选项
      loop: true, // 循环模式选项

      // 如果需要分页器
      pagination: {
        el: ".swiper-pagination",
      },

      // 自动切换
      autoplay: true,

      // 切换效果
      effect: 'coverflow',

      // 如果需要前进后退按钮
      //navigation: {
      //  nextEl: ".swiper-button-next",
      //  prevEl: ".swiper-button-prev",
      //},

      // 如果需要滚动条
      //scrollbar: {
      //  el: ".swiper-scrollbar",
      //},
    });
  },
};
</script>
<style scoped>
.swiper-container {
  height: 300px;
  width: 100%;
  margin: 0 auto;
}
.swiper-container img {
  width: 100%;
  height: 100%;
}
</style>